<template>
  <div>
    <p>
      ES传统方式解构(能获取到值，但是不具有响应性),所以只能这样读取
      'mainStore.count'
    </p>
    <h1>{{ mainStore.count }}</h1>

    <p>Pinia解构方法：storeToRefs，就可以解构后直接双花括号读取， count</p>
    <h1>{{ count }},{{ foo }}</h1>
    <h1>{{ mainStore.arr }}</h1>

    <p>
      <button @click="handChangeState">方法一。方法二，修改数据</button>
    </p>
    <p>
      <button @click="handChangeThreeState">方法三，修改数据</button>
    </p>
    <p>
      <button @click="handChangeFourState">方法四，修改数据</button>
    </p>
    <p>
      <button @click="handChangeActionState">Action用法，封装修改数据</button>
    </p>
    <p>
      <button @click="mainStore.changeState(10, 20)">Action用法，也能这样写</button><br/><br/>
      <button @click="changeState(10, 20)">Action用法，不能结构出来</button>
    </p>
    <h1>{{ mainStore.count10 }}</h1>
    <h1>{{ mainStore.count10 }}</h1>
    <h1>{{ count10 || '数据读不出来' }}</h1>
  </div>
</template>

<script lang="ts" setup>
import {} from "vue";
import { useMainStore } from "../store/index";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();
// ES传统方式解构(能获取到值，但是不具有响应性),因为这样子拿到的数据是一次性的
// const { count, foo } = mainStore;

// 官方提供的  storeToRefs  响应式解构
// pinia  其实就是把state  数据做成了  reactive 处理了
// 这样解构出来的数据做  ref  响应式代理了

// getters 计算行 可以像 state 一样能够解构出来，但是 actions 方法是不能的
const { count, foo, count10, changeState } = storeToRefs(mainStore);
console.log(mainStore.count);

const handChangeState = () => {
  // 修改State方法一,写这个的时候并未解构
  // 优点：最简单直接的修改方法，代码少。
  // 缺点：只能一次修改一个，不能修改多个。
  // mainStore.$state.count++  //和下面的效果相同
  mainStore.count++;

  console.log("--------------");

  // 修改State方法二
  // 优点：可以解构store中的内容，代码也不多。
  // 缺点：不能一次修改多个，而且还需要引入storeToRefs，比第一种方法多了一点代码。
  foo.value = "State方法二";

  console.log("--------------");
};

const handChangeThreeState = () => {
  // 修改State方法三
  // 可通过$patch传对象参数修改, 可同时修改多个数据
  // 优点：可以一次性修改多个
  // 缺点：不能直接修改原来的state，对state中的数组或对象不能增加或删除，只能创建新的对象进行赋值。
  mainStore.$patch({
    count: mainStore.count++,
    foo: "State方法三",
    // 例如arr数组,对state中的数组或对象不能增加或删除，只能创建新的对象进行赋值。
    arr: [
      ...mainStore.arr,
      4,
      "对state中的数组或对象不能增加或删除，只能创建新的对象进行赋值",
    ],
  });
};

const handChangeFourState = () => {
  // 可通过$patch传  函数参数修改, 可同时修改多个数据, 可对数组或对象使用添加/删除方法 (推荐最后一种)
  mainStore.$patch((state) => {
    state.arr.push(4, "可对数组或对象使用添加/删除方法"),
      state.count++,
      (state.foo = "State方法四");
  });
};

// 逻辑比较多的时候封装到 action 做处理
const handChangeActionState = () => {
  mainStore.changeState(10, 20);
};
</script>

<style lang="less" scoped></style>
